<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="../../codebase/webix.css" type="text/css" media="screen" charset="utf-8">
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="./common/underscore.js"></script>
		<script type="text/javascript" src="./common/backbone.js"></script>

		<script src="../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
		<title>Routes. Changing the Webix Layout</title>
	</head>
	<body>
		<div style="height:300px; width:200px" id="app1_here"></div>
		
		
		<script type="text/javascript" charset="utf-8">
			var routes = new (Backbone.Router.extend({
				routes:{
					"":"index", 
					"films/:id":"details"
				},
				details:function(id){
					template.el = layout.root.getChildViews()[1];
					template.render();
				},
				index:function(){
					list.el = layout.root.getChildViews()[1];
					list.render();
					$$("mylist").attachEvent("onAfterSelect", function(id){
						routes.navigate("films/"+id, { trigger:true });
					});
				}
			}));

			var template = new WebixView({
				config:{ template:"Details page<br>not implemented :)<br><button onclick='history.back()'>Back</button>" }
			});
			var list = new WebixView({
				config:{
					view:"list", url:"common/data.json",
					template:"#title#", select:true,
					id:"mylist"
				}
			});
			var layout = new WebixView({
				el:"#app1_here",
				config:{
					rows:[
						{ template:"Click on item", type:"header" },
						{ }
					]
				}
			});


			//init app
			layout.render();
			Backbone.history.start();
			
		</script>
	</body>
</html>